<template>
    <div class="tab-full " style="position: absolute;bottom: 0;top: 0;left: 0;right: 0;" >
        <el-tabs class="active-tab-hightlight-top"  v-if="ctx.tabs.length >1" type="border-card"
                  @tab-click="handleClick"
                  style="width: 100%;height: 100%;"
                  :value="ctx.crt_tab_name" >

            <!--<el-tab-pane v-for="tab in normed_tab( tabgroup.tabs )"            @mouseenter="set_hover(tab,true)" @mouseleave="set_hover(tab,false)"-->
            <el-tab-pane v-for="tab in normed_tab"
                         lazy
                         :key="tab.name"
                         :name="tab.name">
                        <span slot="label" v-if="tab.icon_image" class="tab-label" :class="{active:ctx.crt_tab_name==tab.name}">
                             <img class="icon_image_active" :src="tab.icon_image_active || tab.icon_image" alt="">
                             <img class="icon_image" :src=" tab.icon_image" alt="">
                            <span v-text="tab.label"></span>
                        </span>
                <span slot="label" v-else  v-text="tab.label" ></span>
                <!--<span v-if="!tab._loaded"></span>-->
                <component :is="tab.editor || tab.com " :tab_head="tab"
                           :par_row="ctx.par_row"
                           :ref="'_tab_'+tab.name" @tab-event="up_event($event)"></component>


            </el-tab-pane>
        </el-tabs>

        <component v-else v-for="tab in ctx.tabs"  :is="tab.editor || tab.com " :tab_head="tab"
                   :par_row="ctx.par_row"
                   :ref="'_tab_'+tab.name" @tab-event="up_event($event)"></component>
    </div>
</template>
<script>
    export default {
        props:['ctx'],
        data(){
            //ex.each(this.ctx.tabs,tab=>{
            //    if(tab.lazy_init){
            //        Vue.set(tab,'_loaded',false)
            //    }
            //})
            var childStore = new Vue()
            childStore.vc = this
            return {
//                childStore:childStore,
                is_mounted:false
            }
        },
        watch:{
            //'ctx.crt_tab_name':function (v){
            //     this.show_tab(v)
            // }
        },
        created(){

        },
        mounted:function(){
            this.is_mounted  = true
            this.show_tab(this.ctx.crt_tab_name)
        },
        computed:{
            normed_tab:function(){
                var tabs = this.ctx.tabs
                var par_row = this.ctx.par_row
                var out_tabs = ex.filter(tabs,function(tab){
                    if(tab.show){
                        return ex.eval(tab.show,{par_row:par_row})
                        //return ex.boolExpress(par_row,tab.show)
                    }else{
                        return true
                    }
                })
                return out_tabs
            }
        },
        methods:{
            set_hover(tab,value){
                Vue.set(tab,'_hover',value)
            },
            show_tab(name){
                //var tab_head = ex.findone(this.normed_tab,{name:name})
                //if(tab_head.lazy_init){
                //     ex.eval(tab_head.lazy_init,{head:tab_head}).then(()=>{
                //         delete tab_head.lazy_init
                //         Vue.set(tab_head,'_loaded',true)
                //         this.ctx.crt_tab_name=name
                //     })
                //
                //}else{
                //    Vue.set(tab_head,'_loaded',true)
                //
                //}
                this.ctx.crt_tab_name=name

//                Vue.nextTick(()=>{
//                    this.$refs['_tab_'+this.ctx.crt_tab_name][0].$emit('tab-show',name)
//                })

                //var self =this
                //if(this.is_mounted){
                //    Vue.nextTick(function(){
                //        if(self.$refs['_tab_'+name][0].on_show){
                //            self.$refs['_tab_'+name][0].on_show()
                //        }
                //    })
                //}
            },
            handleClick(tab, event) {
                if(this.crt_tab_name != tab.name){
                    this.show_tab(tab.name)
                    this.$emit('click-tab',name)
                }
            },
            up_event:function(event){
                this.$emit('win-event',event)
            }
        }
    }
</script>
<style scoped lang="scss">
.tab-label{
    img{
        height: 20px;
        width: auto;
        position: relative;
        top: -1px;
    }
    .icon_image{
        display: inline;
    }
    .icon_image_active{
        display: none;
    }
    &.active{
        .icon_image{
            display: none;
        }
        .icon_image_active{
            display: inline;
        }
     }
}
.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{
    .icon_image{
        display: none;
    }
    .icon_image_active{
        display: inline;
    }
}
</style>